import React, { useState, createContext } from "react";
import IndexClass from "./01-体验hooks/01-class实现计数器";
import CounterHook from "./01-体验hooks/02-hooks初体验";
import HooksTwo from "./01-体验hooks/03-counter-hooks";
import MultHookState from "./02-useState的使用/01-多个状态和复杂状态";
import ComplexHookState from "./02-useState的使用/02-复杂状态的修改";
import ClassCounterTitleChange from "./03-useEffect使用/01-class实现title的修改";
import HookCounterChangeTitle from "./03-useEffect使用/02-useEffect的hook实现title的修改";
import EffectHookCancelDemo from "./03-useEffect使用/03-useEffect模拟订阅和取消订阅";
import MultiEffectHookDemo from "./03-useEffect使用/04-多个useEffect一起使用";
import ContextHookDemo from "./04-useContext使用/01-useContext使用";
import Home from "./05-useReducer使用/01-home";
import Profile from "./05-useReducer使用/03-profile";
import CallbackHookDemo01 from "./06-useCallback使用/01-useCallback不能进行的性能优化";
import CallbackHookDemo02 from "./06-useCallback使用/02-useCallback进行性能优化";
import MemoHookDemo01 from "./07-useMemo使用/01-useMemo复杂计算的应用";
import MemoHookDemo02 from "./07-useMemo使用/02-useMemo传入子组件应用类型";
import RefHookDemo01 from "./08-useRef的使用/01-useRef引用DOM";
import RefHookDemo02 from "./08-useRef的使用/02-useRef引用其他数据";
import ForwardRefDemo from "./09-uselmperativeHandle的使用/01-回顾forwardRef的用法";
import ForwardRefDemo02 from "./09-uselmperativeHandle的使用/02-uselmperativeHandle的使用";
import EffectCounterDemo from "./10-useLayoutEffect的使用/01-useEffect的count修改.js";
import EffectCounterDemo02 from "./10-useLayoutEffect的使用/02-useLayoutEffect的count修改";
import CustomHookDemo01 from "./11-自定义hook/01-认识自定义Hook";
import CustomContextSahreHook from "./11-自定义hook/02-自定义Hook练习-Context共享";
import CustomScrolLPositionHook from "./11-自定义hook/03-自定义Hook练习-获取滚动位置";
import CustomDatastoreHook from "./11-自定义hook/04-自定义Hook练习-localStorage存储";

// 创建context
export const UserContext = createContext();
export const ThemeContext = createContext();

export const TokenContext = createContext();

function App() {
  const [show, setshow] = useState(true); //默认是 true
  return (
    <div>
      {/* 1.react hooks 初体验 */}
      {/* <IndexClass /> */}
      {/* <CounterHook /> */}
      {/* <HooksTwo /> */}

      {/* 2.useState 的使用 */}
      {/* <MultHookState /> */}
      {/* <ComplexHookState /> */}

      {/* 3. useEffect 的使用 */}
      {/* <ClassCounterTitleChange /> */}
      {/* <HookCounterChangeTitle /> */}

      {/* {show && <EffectHookCancelDemo />}
      <button onClick={(e) => setshow(!show)}>切换</button> */}

      {/* <MultiEffectHookDemo /> */}

      {/* 4.useContext使用 */}
      {/* <UserContext.Provider value={{ name: "xp", age: 18 }}>
        <ThemeContext.Provider value={{ fontSize: "30px", color: "red" }}>
          <ContextHookDemo />
        </ThemeContext.Provider>  
      </UserContext.Provider> */}

      {/* 5.useReducer使用 */}
      {/* <Home />
      <Profile /> */}
      {/* 由此可见 home和profile的数据并不是相互通讯的 只是共享reducer这一个函数 */}

      {/* 6.useCallback使用 */}
      {/* <CallbackHookDemo01 /> */}
      {/* <CallbackHookDemo02 /> */}

      {/* 7.useMemo使用 */}
      {/* <MemoHookDemo01 /> */}
      {/* <MemoHookDemo02 /> */}

      {/* 8.useRef的使用 */}
      {/* <RefHookDemo01 /> */}
      {/* <RefHookDemo02 /> */}

      {/* 9.uselmperativeHandle的使用 */}
      {/* <ForwardRefDemo /> */}
      {/* <ForwardRefDemo02 /> */}

      {/* 10.useLayoutEffect的使用 */}
      {/* <EffectCounterDemo />*/}
      {/* <EffectCounterDemo02 /> */}

      {/* 11.自定义hook */}
      {/* {show && <CustomHookDemo01 />}
      <button onClick={(e) => setshow(!show)}>切换</button> */}
      {/* 
      <UserContext.Provider value={{ name: "xp", age: 18 }}>
        <TokenContext.Provider value="token-xxxxxxxxxxx">
          <CustomContextSahreHook />
        </TokenContext.Provider>
      </UserContext.Provider> */}

      {/* <CustomScrolLPositionHook /> */}
      <CustomDatastoreHook />
    </div>
  );
}
export default App;
